<template>
  <div>
    <section class="container">

      <div class="loginbody">
        <div class="logindata">
          <div class="logintext">
            <h2>Welcome</h2>
          </div>
          <div class="formdata">
            <el-form ref="form" :model="user" :rules="rules">
              <el-form-item prop="username">
                <el-input
                  v-model="user.account"
                  clearable
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="user.password"
                  clearable
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="tool">
            <div>
              <el-checkbox v-model="checked"
              >记住密码</el-checkbox
              >
            </div>
            <div>
              <span class="shou" @click="forgetPwd">忘记密码？</span>
            </div>
          </div>
          <div class="butt">
            <el-button type="primary"@click="login">登录</el-button>
          </div>
        </div>
      </div>
    </section>

    <div class="gcs-footer">

      <div style="width:300px;margin:0 auto;">
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=45012602000101" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://edu-remains.oss-cn-beijing.aliyuncs.com/2022/09/07/82f512198be8423381b2f27f26240b10备案图标.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">桂公网安备 45012602000101号</p></a>
      </div>

    </div>
  </div>


</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import userClient from "~/api/userClient";
export default {
  components: {
    AppLogo
  },

  data() {
    return {
      checked: false,
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { max: 10, message: "不能大于10个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { max: 10, message: "不能大于10个字符", trigger: "blur" },
        ],
      },
      user:{
        account:"",
        password:""
      }
    };
  },
  created() {

  },
  mounted() {
    if(localStorage.getItem("user")){
      this.user=JSON.parse(localStorage.getItem("user"))
      this.checked=true
    }
  },
  methods: {
    remember(){
      if(this.checked){
        localStorage.setItem("user",JSON.stringify(this.user))
      }else{
        localStorage.removeItem("user")
      }
    },
    forgetPwd() {
      this.$router.push({path:"forgetPwd"})
    },
    login(){
      if(this.checked){
        localStorage.setItem("user",JSON.stringify(this.user))
      }else{
        localStorage.removeItem("user")
      }
      userClient.login(this.user)
        .then(response=>{
          if(response.data.code == 20000){
            localStorage.setItem("token",response.data.data.token)
            this.$router.push({path:"home"})
          }else{
            this.$message({
              type:"error",
              message:"账号或者密码错误"
            })
          }
        })
    },

  },
}
</script>

<style scoped>
.loginbody {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("https://edu-remains.oss-cn-beijing.aliyuncs.com/2022/08/03/3956141e5fc544648a5c7b460f6260f1010a0e5d9ed02ca801211d5311891c.jpg@1280w_1l_2o_100sh.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
  padding-top: 150px;
}

.logintext {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.logindata {
  width: 400px;
  height: 300px;
  transform: translate(-50%);
  margin-left: 50%;
}

.tool {
  display: flex;
  justify-content: space-between;
  color: #606266;
}

.butt {
  margin-top: 10px;
  text-align: center;
}

.shou {
  cursor: pointer;
  color: #606266;
}

/*ui*/
/* /deep/ .el-form-item__label {
  font-weight: bolder;
  font-size: 15px;
  text-align: left;
}

/deep/ .el-button {
  width: 100%;
  margin-bottom: 10px;

} */

.gcs-footer{

  background:#222c3a;

  width: 100%;

  height: 30px;

  color: white;

  bottom: 0px;

  position: absolute;

}

.gcs-footer a{

  color: #f0f1f1;

  text-decoration: none;

  vertical-align:middle;

}

</style>
